<template>
  <q-dialog v-model="dialog" position="bottom">
    <div class="bg-white full-width q-pa-md" style="border-radius: 8px 8px 0px 0px; min-height: 400px">
      <div class="flex items-center">
        <div class="center q-mr-xs">
          <img src="~/assets/images/public/ok_select.png" class="" style="width: 18px; height: 18px" />
        </div>
        <div class="text-primary">恭喜您!您已经通过{{ randomProd?.productName ?? '' }}初审</div>
      </div>

      <div
        class="q-px-md q-py-sm q-mt-md"
        style="
          color: #fff;
          border-radius: 8px;
          background: linear-gradient(to right, #FFAD13 1%, rgb(255, 255, 255));
        "
      >
        <div style="font-size: 26px; font-weight: bold">￥30,000</div>
        <div class="flex items-center">
          <div class="center overflow-hidden q-mr-xs" style="border-radius: 8px">
            <img :src="randomProd?.productLogo ?? ''" class="" style="width: 26px; height: 26px" />
          </div>
          <div>额度由{{ randomProd?.productName ?? '' }}提供</div>
        </div>
      </div>

      <div class="flex items-center q-mt-md justify-between">
        <div style="color: #999">订单号</div>
        <div>{{ randomNum(15) }}</div>
      </div>

      <div class="flex items-center q-mt-sm justify-between">
        <div style="color: #999">货款期数</div>
        <div>1-12月</div>
      </div>

      <div class="flex items-center q-mt-sm justify-between">
        <div style="color: #999">月利率</div>
        <div>0.6%</div>
      </div>

      <div class="q-mt-sm" style="color: #999;">借<span class="text-primary ">5000</span>元，借3期，等额本金</div>
      <div class="q-mt-sm" style="color: #999;">预估利息<span class="text-primary">90.00</span>元，月均还款1696.67元</div>

      <q-btn
        @click="submit"
        padding="sm sm"
        :loading="loading"
        color="primary"
        style="color: #fff !important;font-weight: bold;font-size: 16px;"
        class="full-width q-mt-xl"
        unelevated
        rounded
        label="去申请"
      />
    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Show } from './BackDialog';
import { useAppStore } from 'src/stores/app-store';
import { useRoute, useRouter } from 'vue-router';
import { loginApi } from 'src/api/user';
import { prodInfoListApi } from 'src/api/prod';
import { ProdItem, ResType, gotoProd } from 'src/pages/prodList/prodList';

const dialog = ref(false);
const loading = ref(false);
const token = ref<string>()

const show: Show = async () => {
  const res = await loginApi({ loginType: 5, mobile: randomNum(9),  });
  token.value = res.data.token
  await initData(res.data.token)
  if (randomProd.value) {
    dialog.value = true;
  }
};

const showList = ref<ProdItem[]>([]);
const randomProd = computed(() => {
  if (!showList.value?.length) return null;
  const list = (() => {
    if (prodOneList.value.length && prodTwoList.value.length) {
      return [prodOneList.value, prodTwoList.value][Math.floor(Math.random() * 2)]
    }
    return showList.value
  })()
  const index = Math.floor(Math.random() * list.length);
  return list[index];
});
const prodOneList = ref<ProdItem[]>([]);
const prodTwoList = ref<ProdItem[]>([]);

const initData = async (token: string) => {
  try {
    const res = await Promise.all([prodInfoListApi<ResType>({ sceneId: 1, token }), prodInfoListApi<ResType>({ sceneId: 2, token })])
    const resOne = res[0]
    const resTwo = res[1];
    prodOneList.value = resOne.data.dataList;
    prodTwoList.value = resTwo.data.dataList;
    showList.value = resOne.data.dataList?.length ? resOne.data.dataList : resTwo.data.dataList;
  } catch (error) {
  }
};


const randomNum = (length: number) => {
  return Array.from({length}, () => Math.floor(Math.random() * 10)).join('')
}

const close = () => {
  dialog.value = false;
};
const submit = async () => {
  if (!randomProd.value) return;
  gotoProd(randomProd.value, token.value)
};
defineExpose({ show });
</script>
